<template>
    <div class = "homeWeekendwrapper">
        <div class = "weekend-desc">
            <span>周末出游</span><br/>
            <span>致力于推荐超完美套餐</span>
        </div>
        <div class = "weekend-item">
            <swiper :options="swiperOption">
                <swiper-slide
                class = "weekend-list"
                v-for = "item of weekendList"
                :key = "item.id"
                >
                    <div class = "weekend-item-img">
                        <img :src = "item.imgUrl">
                    </div>
                    <div class = "weekend-item-desc">
                        <span>{{item.desc1}}</span><br/>
                           <span>{{item.desc2}}</span>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
  name: 'homeWeekend',
  props:["weekendList"],
  data(){
      return{
            swiperOption:{
                freeMode:true,
                spaceBetween:20,
                slidesPerView:3,
                loop:true,
                pagination:'.swiper-pagination',
                autoHeight: true,
                setWrapperSize :true,
                paginationClickable :true,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                scrollbar:'.swiper-scrollbar',
                mousewheelControl : true,
                observeParents:true,
            },
            
      }
  }
  
 
  
}
</script>

<style lang = 'stylus' scoped>
.homeWeekendwrapper
    width:100%
    .weekend-desc
        width:100%
        text-align:center
        padding-top:10px
        padding-bottom:10px
    .weekend-desc>span:nth-child(1)
                font-weight:bold
                font-size:20px
                line-height:30px
    .weekend-desc>span:nth-child(3)
                font-size:15px
                color:#888
                line-height:30px
                padding-bottom:10px
    .weekend-item
        width:100%
        .weekend-list
            width:2rem
            display:inline-block
            border:1px solid #ccc
            margin:auto 5px 
            padding-bottom:10px
            .weekend-item-img
                text-align:center
            .weekend-item-img>img
                width:100%
            .weekend-item-desc
                text-align:center
                line-height:20px
                padding-top:5px
            .weekend-item-desc>span:nth-child(1)
                font-weight:bold
                font-size:17px
                line-height:30px
            .weekend-item-desc>span:nth-child(3)
                font-size:10px
                color:#888
                line-height:20px
                padding-bottom:10px



</style>